<template>
  <div id="app">
    <div class="header">
      <div class="header_inner">
        <ul class="header_item">
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/photos">分类</router-link></li>
          <li><router-link to="/upload">上传</router-link></li>
          <li><router-link to="/more">管理</router-link></li>
          <li style="float:right" v-if="!login_status">
            <router-link to="/register">注册</router-link>
          </li>
          <li style="float:right" v-if="!login_status">
            <router-link to="/login">登录</router-link>
          </li>
          <li style="float:right" v-if="login_status" @click="logout">
            <router-link to="/login">{{ userinfo.username }}: 退出</router-link>
          </li>
          <input
            style="float:right"
            v-model="work_name"
            id="search"
            @keyup.enter="search_work"
            value=""
            type="text"
            placeholder="按回车搜索.."
          />
        </ul>
      </div>
    </div>
    <div class="main">
      <router-view />
    </div>

    <!-- 作品搜索子组件 -->
    <div class="dialog">
      <el-dialog
        title="搜索结果"
        :visible.sync="dialog_status"
        width="1000px"
        :lock-scroll="false"
      >
        <search :works_list="works_list" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Home from "./components/home.vue";
import search from "./components/common/search";
import request from "./request/index";

export default {
  name: "app",
  data() {
    return {
      login_status: "",
      work_name: "",
      works_list: [],
      dialog_status: false,
      userinfo: {
        id: "",
        username: "",
      },
    };
  },
  components: {
    Home,
    search,
  },
  methods: {
    get_login_status() {
      this.login_status = sessionStorage.getItem("login_status");//当前登录状态为获取到的Item的登录状态
      this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));//
    },
    logout() {
      sessionStorage.clear();
    },
    search_work() {
      console.log(this.work_name);
      this.openFullScreen2();
    },
    // 过渡效果
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: "正在搜索作品。。。",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        request({
          url: "/works/search-work/",
          params: {
            name: this.work_name,
          },
        })
          .then((res) => {
            if (res.code == 200) {
              this.works_list = res.data;
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
        loading.close();
        this.dialog_status = true;
      }, 2000);
    },
  },
  created() {
    this.get_login_status();
  },
  watch: {
    $route(to, from) {
      this.get_login_status();//路由传值，把当前登录状态传给????
      this.dialog_status = false;
    },
  },
};
</script>

<style>
body {
  background: #101010;
}

.header {
  height: 65px;
  width: 100%;
  background: #000;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
}

.header_inner {
  margin: auto;
  padding: 0 40px;
}

.header_item {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: aliceblue;
}

.header_item li {
  float: left;
}

.header_item li a {
  display: block;
  color: white;
  padding: 18px 16px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
}

/* 搜索框 */
.header_item input[type="text"] {
  color: rgb(189, 188, 188);
  opacity: 0.5;
  float: right;
  padding: 6px;
  border: none;
  margin: 18px;
  font-size: 17px;
}

.main {
  margin-top: 65px;
  min-height: 1000px;
}

.main_content {
  width: 94%;
  margin: auto;
  min-height: 1000px;
}
</style>
